<template>
  <view class="chat-detail">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-button" @click="handleBack">
        <image src="/static/images/back-icon.png" mode="aspectFit" class="back-icon" />
      </view>
      <text class="title">聊天详情</text>
    </view>

    <!-- 消息列表 -->
    <scroll-view class="message-list" scroll-y="true" :scroll-into-view="scrollToView">
      <view class="message-item" v-for="(message, index) in messages" :key="index" :id="'msg-' + index">
        <view class="message-content" :class="{ 'self': message.isSelf }">
          <image v-if="!message.isSelf" :src="message.avatar" mode="aspectFill" class="avatar" />
          <view class="message-bubble">
            <text class="message-text">{{ message.content }}</text>
            <text class="message-time">{{ message.time }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 输入框 -->
    <view class="input-section">
      <view class="input-box">
        <input 
          type="text" 
          v-model="inputMessage" 
          placeholder="输入消息..." 
          @confirm="sendMessage"
          class="message-input"
        />
        <view class="send-button" @click="sendMessage">
          <text class="send-text">发送</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ChatDetailPage',
  data() {
    return {
      inputMessage: '',
      scrollToView: '',
      messages: [
        {
          isSelf: false,
          avatar: '/static/images/avatar.jpg',
          content: '您好，我是您的旅行助手，有什么可以帮您？',
          time: '10:30'
        },
        {
          isSelf: true,
          content: '我想了解一下杭州的旅游景点',
          time: '10:31'
        },
        {
          isSelf: false,
          avatar: '/static/images/avatar.jpg',
          content: '杭州有很多著名的景点，比如西湖、灵隐寺、雷峰塔等。您想了解哪个景点呢？',
          time: '10:32'
        }
      ]
    }
  },
  methods: {
    handleBack() {
      uni.switchTab({
        url: '/pages/chat/TravelChatPage',
        success: () => {
          console.log('返回聊天列表成功')
        },
        fail: (err) => {
          console.error('返回失败:', err)
          uni.showToast({
            title: '返回失败',
            icon: 'none'
          })
        }
      })
    },
    sendMessage() {
      if (!this.inputMessage.trim()) return
      
      const newMessage = {
        isSelf: true,
        content: this.inputMessage,
        time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
      }
      
      this.messages.push(newMessage)
      this.inputMessage = ''
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToView = 'msg-' + (this.messages.length - 1)
      })
      
      // 模拟回复
      setTimeout(() => {
        const reply = {
          isSelf: false,
          avatar: '/static/images/avatar.jpg',
          content: '收到您的消息，正在为您查询相关信息...',
          time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
        }
        this.messages.push(reply)
        this.$nextTick(() => {
          this.scrollToView = 'msg-' + (this.messages.length - 1)
        })
      }, 1000)
    }
  }
}
</script>

<style>
.chat-detail {
  font-family: 'Poppins', sans-serif;
  background-color: #F5F5F5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  background-color: #FFFFFF;
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #F0F0F0;
}

.back-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
}

.message-list {
  flex: 1;
  padding: 16px;
  padding-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.message-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.message-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  max-width: 70%;
}

.message-content.self {
  flex-direction: row-reverse;
  align-self: flex-end;
  margin-right: 20px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  object-fit: cover;
}

.message-bubble {
  background-color: #FFFFFF;
  border-radius: 18px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.self .message-bubble {
  background-color: #26C992;
  border-bottom-right-radius: 4px;
}

.message-text {
  font-size: 16px;
  color: #000000;
  line-height: 1.4;
}

.self .message-text {
  color: #FFFFFF;
}

.message-time {
  font-size: 12px;
  color: #89807A;
  position: absolute;
  right: 0;
  bottom: -20px;
}

.self .message-time {
  color: #89807A;
  left: auto;
  right: 0;
}

.input-section {
  padding: 16px;
  background-color: #FFFFFF;
  border-top: 1px solid #F0F0F0;
}

.input-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background-color: #F5F5F5;
  border-radius: 20px;
  padding: 8px 16px;
}

.message-input {
  flex: 1;
  font-size: 15px;
  color: #000000;
  background-color: transparent;
}

.send-button {
  background-color: #26C992;
  border-radius: 16px;
  padding: 8px 16px;
}

.send-text {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
}
</style> 